<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宇成建筑</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="../statics/css/font.css">
    <link rel="stylesheet" href="../statics/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../statics/css/xadmin.css">
    <link rel="stylesheet" href="../statics/css/style.css">
</head>

<body class='labelAuto'>
    <div class="x-nav">
        <span class="layui-breadcrumb">
            <a href="welcome.html">首页</a>
            <a href="javascript:;">账号管理</a>
            <a>
                <cite>账号列表</cite>
            </a>
        </span>
        <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
        </a>
    </div>
    <div class="layui-fluid">
        <div class="layui-d layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body search">
                        <form action="" class="layui-form livingList">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">搜索</label>
                                    <div class="layui-input-block">
                                        <input type="search" autocomplete="off" class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <button class="layui-btn search" type="button" id='search'>
                                        <i class="iconfont layui-icon">&#xe615;</i>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="layui-card-body tableCardBody">
                        <table class="layui-table" id="lists" lay-filter="test"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script src="../statics/plugins/layui/layui.js" charset="utf-8"></script>
<script src='../statics/plugins/jQuery-3.2.1/jquery-3.2.1.min.js'></script>
<script type="text/javascript" src="../statics/plugins/X-admin/xadmin.js"></script>
<script type="text/javascript" src="../statics/js/public.js?v=1129"></script>
<script type="text/html" id='toolbar'>
    <button class="layui-btn add">
        添加管理员
    </button>
</script>
<script type="text/javascript">
    layui.use(['form', 'layer', "table", "laydate"], function () {
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var layer = layui.layer;
        // 异步数据加载
        var lists = table.render({
            elem: '#lists', //绑定DOM元素
            id: 'lists', //table的id
            title: '人员列表',
            height: 'full-150',
            contentType: "application/json; charset=utf-8",
            url: url + '/auth/admin/lists', //数据接口地址
            request: {
                pageName: 'page', //页码的参数名称，默认：page
                limitName: 'length' //每页数据量的参数名，默认：limit
            },
            method: 'POST',
            parseData: function(res){
				return {
					"code": res.code, //解析接口状态
                    "data": res.data.data,
                    "msg": res.msg,
                    "count":res.data.count
				};
            },
            where: {
                projectId: null,
                search: "",
                token:getToken()
            },
            toolbar: '#toolbar',
            defaultToolbar: ['filter'],
            page: true, //开启分页
            limit: 10, //默认每页记录条数
            limits: [10, 20, 50], //每页记录条数可选数量
            cols: [
                [ //表头
                    { field: '', title: '编号', type: 'numbers',width:'8%',fixed:'left'},
                    { field: 'username', title: '用户名',width:'10%'},
                    { field: 'roleName', title: '角色',width:'15%'},
                    { field: 'name', title: '姓名',width:'10%'},
                    { field: 'phone', title: '联系方式',width:'10%'},
                    { field: 'projectName', title: '所在单位',width:"17%"},
                    { field: 'professionName', title: '工种',width:"15%"},
                    { field: 'lastLoginTime', title: '上次登录时间',width:"15%"},
                    { field: 'status', title: '账号状态',width:"10%",templet(d){
                        return `${d.status==0?"停用中":"使用中"}`
                    }},
                    { field: '', title: '操作',fixed:'right',width:"20%",templet(d){
                        if(d.id=='1'){
                            return ``
                        }else{
                            return `
                                <button class='bianji layui-btn' data-id=${d.id} auth='administratorEdit' lay-event='bianji'>编辑</button>
                                <button class='juese layui-btn layui-btn-warm' data-id=${d.id} data-projectId=${d.projectId}  lay-event='juese'>设置角色</button>
                                <button class='status layui-btn ${d.status==0?"layui-btn-danger":"layui-btn-normal"}' data-id=${d.id} auth='administratorStatus'  lay-event='status'>${d.status==0?"已停用":"使用中"}</button>
                            `
                        }
                    }}
                ]
            ],
            response: {
                statusName: 'code', //数据状态的字段名称，默认：code
                statusCode: 100000, //成功的状态码，默认：0
                msgName: 'msg', //状态信息的字段名称，默认：msg
                countName: 'count', //数据总数的字段名称，默认：count
                dataName: 'data' //数据列表的字段名称，默认：data
            },
            done:function(){
                permission();
            }
        });

        table.on('tool(test)',function(data){
            if(data.event=='bianji'){
                layer.open({
                    type: 1,
                    title: "编辑",
                    area: ['40%','80%'],
                    content: `
                        <form class="layui-form layerOpen" action="" id='popSearchRoleTest'>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">用户名</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" id="username" value=${data.data.username}>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">姓名</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" id="name" value=${data.data.name}>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">联系方式</label>
                                    <div class="layui-input-block">
                                        <input type="text" class="layui-input" id="phone" value=${data.data.phone}>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">所在单位</label>
                                    <div class="layui-input-block">
                                        <select name="" id="project">
                                            
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success:function(){
                        var professionid='';
                        $.ajax({
                            url: url + "/auth/admin/info",
                            type: "POST",
                            contentType:'application/json',
                            async:false,
                            data: JSON.stringify({
                                id: Number(data.data.id),
                                token:getToken()
                            }),
                            success: function(r) {
                                if(r.code == 100000) {
                                    var professionId=$.parseJSON(r.data.professionId);
                                    professionid=professionId;
                                    var div='';
                                    if(professionId.length==0){
                                        div=`
                                            <div class="layui-item">
                                                <div class="layui-inline">
                                                    <label class="layui-form-label">负责工种</label>
                                                    <div class="layui-input-block">
                                                        <select name="" class="optionType">
                                                            <option value='null'>-</option>
                                                            <option value='0' selected>全部</option>
                                                        </select>
                                                        <a href='javascript:;' class='addoption1'>+</a>
                                                    </div>
                                                </div>
                                            </div>
                                        `
                                    }else{
                                        for(var i=0;i<professionId.length;i++){
                                            div+=`
                                                <div class="layui-item">
                                                    <div class="layui-inline">
                                                        <label class="layui-form-label">负责工种</label>
                                                        <div class="layui-input-block">
                                                            <select name="" class="optionType">
                                                                <option value='null'>-</option>
                                                                <option value='0' selected>全部</option>
                                                            </select>
                                                            <a href='javascript:;' class='addoption1'>-</a>
                                                        </div>
                                                    </div>
                                                </div>
                                            `
                                        }
                                    }
                                    $('#popSearchRoleTest').append(div);
                                    $('#popSearchRoleTest .layui-item:last a').html('+');
                                    form.render();
                                    
                                } else {
                                    tips('管理员信息详情',r);
                                }
                            }
                        })
                        $.ajax({
                            url: url + "/project/project/selectLists",
                            type: "POST",
                            async:false,
                            contentType:'application/json',
                            data: JSON.stringify({
                                token:getToken()
                            }),
                            success: function(r) {
                                if(r.code == 100000) {
                                    var option1='';
                                    for(var i = 0; i < r.data.length; i++) {
                                        option1 += `
                                            <option ${r.data[i].name == data.data.projectName?"selected":""} value=${r.data[i].id} name=${r.data[i].status}>${r.data[i].name}</option>
                                        `
                                    }
                                    $('#project').append('<option value="1">总部</option>'+option1);
                                    form.render();
                                } else {
                                    tips('项目下拉列表',r);
                                }
                            }
                        })

                        $.ajax({
                            url: url + "/setting/profession/lists",
                            type: "POST",
                            async:false,
                            contentType:'application/json',
                            data: JSON.stringify({
                                token:getToken()
                            }),
                            success: function(r) {
                                if(r.code == 100000) {
                                    var option2='';
                                    for(var i = 0; i < r.data.data.length; i++) {

                                        option2 += `
                                            <option value=${r.data.data[i].id} name=${r.data.data[i].status}>${r.data.data[i].name}</option>
                                        `
                                    }
                                    $('.optionType').append(option2);
                                    form.render();
                                    for(var i=0;i<professionid.length;i++){
                                        for(var j=0;j<$('.optionType').eq(i).find('option').length;j++){
                                            if(professionid[i]==$('.optionType').eq(i).find('option').eq(j).val()){
                                                $('.optionType').eq(i).find('option').eq(j).prop('selected','selected');
                                                form.render();
                                            }
                                        }
                                    }
                                } else {
                                    tips('项目下拉列表',r);
                                }
                            }
                        })
                        form.render();
                    },
                    yes: function(index, layero) {
                        var arr=[];
                        for(var i=0;i<$('.optionType').length;i++){
                            if($('.optionType').eq(i).find('option:selected').val()==0){

                            }else{
                                arr.push(Number($('.optionType').eq(i).find('option:selected').val()))
                            }
                        }
                        var username = $('#username').val();
                        var name = $('#name').val();
                        var projectId = $('#project option:selected').val();
                        var phone = $('#phone').val();
                        $.ajax({
                            url: url + "/auth/admin/edit",
                            type: "POST",
                            traditional:true,
                            data: {
                                professionId: JSON.stringify(arr),
                                id:data.data.id,
                                username: username,
                                name: name,
                                projectId: projectId,
                                phone: phone,
                                token:getToken()
                            },
                            success: function(r) {
                                if(r.code == 100000) {
                                    tips('编辑管理员',r);
                                    setTimeout(function() {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('编辑管理员',r);
                                }
                            }
                        })
                    }
                })
            }else if(data.event=="juese"){
                layer.open({
                    type: 1,
                    title: "修改角色",
                    area: ['40%', 'auto'],
                    content: `
                        <form class='layui-form layerOpen'>
                            <div class="layui-item">
                                <div class='layui-inline'>
                                    <label class="layui-form-label">角色</label>
                                    <div class="layui-input-block">
                                        <select id='role'>
                                            <option value='null'>-</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    `,
                    btn: ['确认', '取消'],
                    skin: 'my-skin',
                    success:function(){
                        form.render();
                    },
                    yes: function(index, layero) {
                        var roleId = $('#role option:selected').val();
                        $.ajax({
                            url: url + "/auth/admin/setRole",
                            type: "POST",
                            contentType:'application/json',
                            data: JSON.stringify({
                                adminId:data.data.id,
                                roleId: roleId,
                                token:getToken()
                            }),
                            success: function(r) {
                                if(r.code == 100000) {
                                    tips('设置角色',r);
                                    setTimeout(function() {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('设置角色',r);
                                }
                            }
                        })
                    }
                })
                $.ajax({
                    url: url + '/auth/role/selectLists',
                    type: "post",
                    data:{
                        projectId:data.data.projectId,
                        token:getToken()
                    },
                    success: function(r) {
                        if(r.code == 100000) {
                            var option='';
                            for(var i = 0; i < r.data.length; i++) {
                                option += `
                                    <option ${r.data[i].roleId == data.data.roleId?"selected":""} value=${r.data[i].id}>${r.data[i].name}</option>
                                `
                            }
                            $('#role').append(option);
                            form.render();
                        }
                    }
                })
            }else if(data.event=='status'){
                $.ajax({
                    url: url + '/auth/admin/editStatus',
                    type: "post",
                    data: {
                        id:data.data.id,
                        status:data.data.status==0?1:0,
                        token:getToken()
                    },
                    dataType: "json",
                    success: function(r) {
                        if(r.code == 100000) {
                            table.reload('lists');
                        } else {
                            tips('修改状态',r);
                        }
                    }
                })
            }
        })

        $('body').on('click','#search',function(){
            var search=$(this).parent().prev().find('input').val();
            table.reload('lists',{
                page: {
                    curr: 1 //重新从第 1 页开始
                },
                where:{
                    "search":search
                }
            })
        })
        $('body').on('click','a.addoption1',function(){
            if($(this).html()=='+'){
                var html=$(this).parent().parent().parent().html();
                var div=`<div class="layui-item">${html}<div>`;
                $('#popSearchRoleTest').append(div);
                $('#popSearchRoleTest a.addoption1').html('-');
                $('#popSearchRoleTest a.addoption1:last').html('+');
                $('#popSearchRoleTest .layui-item:last select option:selected').attr('selected',"");
                form.render();
            }else{
                $(this).parent().parent().parent().remove();
                form.render();
            }
        })
        $('body').on('click','.add',function(){
            layer.open({
                title:'添加管理员',
                area:['40%','80%'],
                content:`
                    <form class="layui-form layerOpen" action="" id='popSearchRoleTest'>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="username">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">姓名</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="name">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">联系方式</label>
                                <div class="layui-input-block">
                                    <input type="text" class="layui-input" id="phone">
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">所在单位</label>
                                <div class="layui-input-block">
                                    <select name="" id="project" lay-filter='project'>
                                        <option value='null'>-</option>
                                        ${projectSelect()}
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">负责工种</label>
                                <div class="layui-input-block">
                                    <select name="" id="optionType">
                                        <option value='null'>-</option>
                                        ${professionSelect()}
                                    </select>
                                </div>
                                <a href='javascript:;' class='addoption'>+</a>
                            </div>
                        </div>
                        <div class="layui-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">角&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;色</label>
                                <div class="layui-input-block">
                                    <select name="" id="rolename">
                                        <option value='null'>请先选择所在单位</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                `,
                btn:['确定','取消'],
                success:function(){
                    form.on('select(project)',function(data){
                        if(data.value>0){
                            $.ajax({
                                url: url + "/auth/role/selectLists",
                                type: "POST",
                                data: {
                                    projectId:Number(data.value),
                                    token:getToken()
                                },
                                success: function(r) {
                                    if(r.code == 100000) {
                                        var option = '';
                                        for(var i = 0; i < r.data.length; i++) {
                                            option += `
                                                <option value=${r.data[i].id} name=${r.data[i].status}>${r.data[i].name}</option>`
                                        }
                                        $('#rolename').html('<option value="null">-</option>' + option);
                                        form.render();
                                    } else {
                                        tips('角色下拉列表',r);
                                    }
                                }
                            })
                        }else{
                            $('#rolename').html("<option value='null'>请先选择所在单位</option>");
                            form.render();
                        }
                    })
                    form.render();
                },
                yes:function(){
                    var arr=[];
                    for(var i=0;i<$('.optionType').length;i++){
                        if($('.optionType').eq(i).find('option:selected').val()==0){

                        }else{
                            arr.push(Number($('.optionType').eq(i).find('option:selected').val()))
                        }
                    }
                    var username = $('#username').val();
                    var roleId = $('#rolename option:selected').val();
                    if(roleId == 'null') {
                        roleId = null
                    } else {
                        roleId = Number(roleId)
                    }

                    var name = $('#name').val();
                    var projectId = $('#project option:selected').val();
                    if(projectId == 'null') {
                        projectId = null
                    } else {
                        projectId = Number(projectId)
                    }
                    var phone = $('#phone').val();
                    if(username != "" && roleId > 0 && name != "" && projectId > 0 && phone != "") {
                        $.ajax({
                            url: url + '/auth/admin/add',
                            type: "post",
                            traditional:true,
                            data: {
                                username: username,
                                roleId: roleId,
                                name: name,
                                projectId: projectId,
                                phone: phone,
                                professionId:JSON.stringify(arr),
                                token:getToken()
                            },
                            dataType: "json",
                            success: function(r) {
                                if(r.code == 100000) {
                                    tips('添加管理员',r);
                                    setTimeout(function() {
                                        layer.closeAll();
                                        table.reload('lists');
                                    }, 2000)
                                } else {
                                    tips('添加管理员',r);
                                }
                            }
                        })
                    } else {
                        layer.msg('请把信息填写完整再添加');
                    }
                }
            })

        })
        $('body').on('click','a.addoption',function(){
            if($(this).html()=='+'){
                var html=$(this).parent().parent().html();
                var div=`<div class="layui-item">${html}<div>`;
                $('#popSearchRoleTest .layui-item:last').before(div);
                $('#popSearchRoleTest a.addoption').html('-');
                $('#popSearchRoleTest a.addoption:last').html('+');
                form.render();
            }else{
                $(this).parent().parent().remove();
                form.render();
            }
            
        })
    });
</script>

</html>